<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-empty text="暂时没有点过的菜哦~" mode="order" :show="dishlist.length==0" :color="color"></u-empty>
		<view class="orderitem" v-for="j in dishlist" @click="godishdetail(j._id)">
			<view class="left">
				<view class="pic">
					<u-image :src="j.imgurl" mode="" width="100%" height="100%"></u-image>
				</view>
				<view>
					<view style="color: #555555;">{{j.name}}</view>
					<view style="color: #C0C0C0;font-size: 13px;">{{j.type}}</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view>￥{{j.nowprice}}</view>
				<view>
					<view style="width:140rpx;border: 1px solid #ffc847;margin-left: auto;border-radius: 5px;font-size: 12px;text-align: center;padding: 10rpx;color: #fd2424;"
					 @click="addcar(j)">再次购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				color:'#000000',
				account: '',
				dishlist: []
			}
		},
		created() {
			this.account = JSON.parse(uni.getStorageSync('currentUser')).account
			this.gethistory()
		},
		methods: {
			godishdetail(id) {
				console.log(id, 'dianji');
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '../detail/detail?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})
				// #endif
			},
			...mapActions(['CHANGE_COUNT']),
			addcar(item) {
				console.log(item);
				this.CHANGE_COUNT({
					row: item,
					type: true
				});
				this.$refs.uToast.show({
					title: '加入购物车成功',
					type: 'success',
					duration: 1000,
					position: "top"
				})

			},
			gethistory() {
				this.$u.post('/order/getDishByUser', {
					account: this.account
				}).then(res => {
					console.log(res, '历史');
					this.dishlist = res.data.curdishlist
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.container {
		height: 100vh;
		padding: 20rpx;
	}

	.pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.left {
		display: flex;
	}

	.orderitem {
		border: 1px solid #bfccc5;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		border-radius: 5px;
		background: #FFFFFF;
		padding: 10px;
		box-shadow: 0px -1px 2px #555555;
	}

	.item {
		padding: 10px;
		width: 90%;
		background: #FFFFFF;
		border-radius: 5px;
		margin-top: 40rpx;
		margin: 40rpx auto 0 auto;
	}
</style>
